<template>
  <el-container class="containerBox">
    <el-header style="height: 0.6rem">
      <div class="navbar-left">
        <img src="~@/assets/images/logo.png" />
        <i
          :class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold', 'icon']"
          @click="toggleSideBar"
        />
      </div>
      <div class="right-menu">
        <el-dropdown class="avatar-container" trigger="click">
          <div class="avatar-wrapper">
            <div>
              <span style="user-select: none; color: #fff">admin</span>
              <i class="el-icon-caret-bottom" style="color: #fff" />
            </div>
          </div>
          <el-dropdown-menu slot="dropdown" class="user-dropdown">
            <el-dropdown-item> 首页 </el-dropdown-item>
            <el-dropdown-item>Github</el-dropdown-item>
            <el-dropdown-item>文档</el-dropdown-item>
            <el-dropdown-item divided @click.native="logout"
              >退出</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <span class="line">|</span>
        <div class="goOut" @click="logout">退出</div>
      </div>
    </el-header>
    <el-container>
      <el-aside :style="{ width: isCollapse ? '0.7rem' : '2rem' }">
        <transition mode="out-in">
          <el-menu
            class="el-menu-vertical-demo"
            background-color="#1e202d"
            text-color="#fff"
            unique-opened
            @select="menuSelect"
            :collapse="isCollapse"
            :default-active="activeIndex"
            :key="active"
            router
          >
            <NavMenu :navlist="oldNav[active]"></NavMenu>
          </el-menu>
        </transition>
      </el-aside>
      <el-main>
        <div class="cru-box">
          <el-breadcrumb separator="">
            <el-breadcrumb-item :to="{ path: '/home' }"
              ><i class="el-icon-s-home ho"></i
            ></el-breadcrumb-item>
            <template v-for="i in routerObj">
              <el-breadcrumb-item :key="i" v-if="i"
                ><span style="margin-right: 0.1rem">/</span>
                {{ i }}</el-breadcrumb-item
              >
            </template>
          </el-breadcrumb>
          <div class="ri">
            <a href="javascript:;" @click="$router.go(-1)"
              ><i class="el-icon-back"></i
            ></a>
            <a href="javascript:;" class="r-a"
              ><i class="el-icon-refresh-right"></i
            ></a>
          </div>
        </div>
        <transition
          class="transition-box"
          name="el-fade-in-linear"
          mode="out-in"
        >
          <router-view />
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import NavMenu from "@/components/common/NavMenu";
export default {
  components: {
    NavMenu
  },
  data() {
    return {
      routerObj: [],
      isCollapse: false,
      activeIndex: "",
      active: "yunzhi",
      oldNav: {
        yunzhi: [
          {
            name: "实时流处理",
            url: "dagedit",
            icon: "el-icon-receiving",
            id: "4"
          }
        ],
      }
    };
  },
  methods: {
    setActive(index) {
      this.active = index;
      console.log(this.oldNav[index]);
      this.$router.push({ path: "/" + this.active });
      // this.$store.commit("CHANG_MODEL", index)
    },
    toggleSideBar() {
      this.isCollapse = !this.isCollapse;
    },
    logout() {
      this.$router.push({ path: "/login" });
    },
    menuSelect(index, indexPath) {
      console.log(index, indexPath, 12);
    },
    getRouter(val, list) {
      list.children.map(i => {
        if (i.url === val) {
          this.routerObj = [list.name, i.name];
        } else {
          if (i.children && i.children.length > 0) {
            this.getRouter(this.activeIndex, i);
          }
        }
      });
    }
  },
  created() { },
  mounted() { },
  watch: {
    $route: {
      handler(val) {
        this.activeIndex = val.path.replace(/\//g, "");
        if (val.redirectedFrom) {
          this.active = val.redirectedFrom.replace(/\//g, "");
        }
        this.getRouter(this.activeIndex, {
          children: this.oldNav[this.active]
        });
      },
      immediate: true
    }
  }
};
</script>
<style lang="scss" scoped>
.mod-config {
  height: calc(100% - 0.3rem);
}
.cru-box {
  height: 0.3rem;
  display: flex;
  justify-content: left;
  align-items: center;
  display: flex;
  width: 100%;
  line-height: 0.3rem;
  .ri {
    width: 1rem;
    font-size: 0.16rem;
    color: #fff;
    text-align: right;
    position: absolute;
    right: 0.2rem;
    .r-a {
      margin-left: 0.14rem;
    }
  }
}
.containerBox {
  height: 100%;
  background: #1e202d;

  .el-header {
    height: 0.6rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    display: flex;
    justify-content: space-between;
    padding: 0 1%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    .navbar-left {
      display: flex;
      align-items: center;

      img {
        height: 0.22rem;
      }

      .icon {
        margin: 0 0.15rem;
        font-size: 0.25rem;
        color: #fff;
        cursor: pointer;
      }

      .tag-box {
        display: flex;
        color: #fff;

        .tag-item {
          cursor: pointer;
          font-size: 0.14rem;
          min-width: 0.7rem;
          height: 0.58rem;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 0.1rem;
          padding: 0.1rem;
        }

        .active {
          background-image: url("~@/assets/images/lst.png");
          background-size: 100% 100%;
        }
      }
    }

    .right-menu {
      display: flex;
      align-items: center;

      .line {
        font-size: 0.18rem;
        color: #fff;
        margin: 0 0.2rem;
      }

      .goOut {
        font-size: 0.17rem;
        cursor: pointer;
        color: #fff;
      }
    }
  }

  .el-container {
    height: calc(100% - 0.6rem);
    .el-aside ::v-deep {
      height: 100%;
      overflow: hidden;
      transition: ease 0.3s;

      .el-menu {
        border: none;
        width: 100%;

        .el-submenu__title {
          font-size: 0.14rem;
        }
      }
      i {
        color: #fff;
      }
      .el-menu--collapse .el-menu-item,
      .el-menu--collapse .el-submenu {
        overflow: hidden;

        i {
          font-size: 0.25rem;
        }
      }
    }

    .el-main {
      width: 100%;
      height: 100%;
      background: #10121a;
      padding: 0.1rem 0.2rem 0.1rem 0.2rem;
      overflow: hidden;

      .el-fade-in-linear-leave-active {
        transform: translate(20px, 0);
        transition: all 0.3s;
      }
    }
  }
}
.ho {
  color: #fff;
  font-size: 0.18rem;
}
</style>
